<template>
  <div class="title">商品分类列表</div>

  <el-table :data="tableData" style="width: 100%" class="table">
    <!-- 商品编号 -->
    <el-table-column prop="id" label="序号" align="center" />
    <!-- 商品图片 -->
    <el-table-column label="商品图片" align="center">
      <template #default="scope">
        <img :src="scope.row.coverImage" alt="" class="img" />
      </template>
    </el-table-column>
    <!-- 商品名称 -->
    <el-table-column prop="name" label="商品名称" align="center" />
    <!-- 商品详情 -->
    <el-table-column prop="desc" label="商品详情" align="center" />
    <!-- 商品操作 -->
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 抽屉弹框 -->
  <!-- :total="total" 总页数 -->
  <!-- v-model:current-page 第几页  -->
  <!-- :page-size="limitNum" 一页多条数据 -->
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    v-model:current-page="count"
    @change="pageChange"
    :page-size="limitNum"
  />

  <el-drawer v-model="drawer2" :direction="'rtl'">
    <template #header>
      <h4>编辑内容</h4>
    </template>
    <template #default>
      <!-- 表单开始 -->
      <el-form :model="editObj" label-width="auto">
        <el-form-item label="商品名称">
          <el-input v-model="editObj.name" />
        </el-form-item>

        <el-form-item label="商品详情">
          <el-input v-model="editObj.desc" type="textarea" />
        </el-form-item>

        <el-form-item label="上传图片">
          <el-input v-model="editObj.coverImage" />
        </el-form-item>

        <!-- 图片墙组件 -->
        <!-- action 后面跟的上传图片的接口地址 -->
        <!-- name 控制上传图片的的参数名--看接口文档 -->
        <el-upload
          v-model:file-list="fileList"
          action="http://localhost:1337/api/v1/admin/productcategory"
          name="img"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <!-- 预览弹框 -->
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>

        <el-form-item>
          <el-button type="primary" @click="onSubmit"> 保存 </el-button>
          <el-button @click="drawer2 = false">取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 表单结束 -->
    </template>
  </el-drawer>

  <!--  -->
</template>

<script setup>
import { ref } from 'vue'
import { prolistRequest, proDelRequest, xgRequest } from '@/api/product'

const tableData = ref([])
const count = ref(1)
const limitNum = ref(5)
const total = ref(0)

//页码改变
function pageChange(e) {
  console.log(count)
  console.log(e)
  //发起请求
  loadlist()
}

// 数据渲染
function loadlist() {
  prolistRequest(count.value, limitNum.value).then((r) => {
    console.log(r.data)
    tableData.value = r.data.data
    total.value = r.data.total
  })
}
loadlist()

// 单删
const handleDelete = async (index, row) => {
  console.log(index, row)
  let r = await proDelRequest(row.id)
  console.log(r.data)
  loadlist()
}

// 修改
let drawer2 = ref(false)
const editObj = ref([])
const handleEdit = (index, row) => {
  console.log(index, row)
  drawer2.value = true
  // row 要编辑的数据--深拷贝
  editObj.value = JSON.parse(JSON.stringify(row))
  // 把字符串数组-转为对象数组
  fileList.value = editObj.value.imgs.map((v) => {
    return {
      name: v,
      url: v,
    }
  })
}
// 弹出框保存事件
function onSubmit() {
  console.log(fileList.value)
  // debugger
  // 点击保存--上传图片组件修改filelist属性
  // imgs 没有修改，接口文档要求修改imgs
  let imgs = fileList.value.map((v) => {
    if (v.response) {
      //v 是刚刚上传的图片
      return v.response.fileUrl
    } else {
      return v.url
    }
  })
  console.log(imgs)
  editObj.value.imgs = imgs

  // 调用保存接口--隐藏抽屉  editObj.value as IListItemData 断定 变量一定是某个类型
  xgRequest(
    editObj.value.id,
    editObj.value.name,
    editObj.value.coverImage,
    editObj.value.desc,
    editObj.value.parent,
  ).then(() => {
    drawer2.value = false
    loadlist()
  })
}

// 上传图片
const fileList = ref([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
</script>

<style lang="css" scoped>
.img {
  width: 100px;
}
.title {
  width: 100%;
  height: 60px;
  background-color: rgb(255, 255, 255);
  line-height: 60px;
}
.table {
  margin-top: 20px;
}
</style>
